<template>
  <el-drawer v-model="visible" direction="rtl" size="800px">
    <template #header>
      <div class="text-lg font-semibold">报告对比</div>
    </template>

    <!-- WebView 嵌套 H5 页面 -->
    <div class="h-full">
      <iframe
        :src="h5Url"
        class="w-full h-full border-0"
        frameborder="0"
        allowfullscreen
      />
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { getToken } from "@/utils/auth";
import { computed } from "vue";

// Props 和 Emits
interface Props {
  modelValue?: boolean;
  currentReport?: any;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  currentReport: () => ({})
});

const emit = defineEmits<{
  "update:modelValue": [value: boolean];
}>();

// 控制显示隐藏
const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => {
    emit("update:modelValue", value);
  }
});

// 构建 H5 页面 URL
const h5Url = computed(() => {
  const baseUrl =
    "https://paas.stjkj.cn/h5/#/pages/report/report-select/report-select";
  const params = new URLSearchParams();

  // 从 props.currentReport 获取参数
  if (props.currentReport?.reportId) {
    params.append("id", props.currentReport.reportId);
  }
  if (props.currentReport?.userId) {
    params.append("userId", props.currentReport.userId);
  }
  if (props.currentReport?.userName) {
    params.append("userName", props.currentReport.userName);
  }
  if (props.currentReport?.familyId) {
    params.append("familyId", props.currentReport.familyId);
  }

  // 获取token - 参考aiPage的实现
  try {
    const tokenData = getToken();
    if (tokenData && tokenData.accessToken) {
      params.append("token", tokenData.accessToken);
    }
  } catch (error) {
    console.error("获取token失败:", error);
  }

  return `${baseUrl}?${params.toString()}`;
});
</script>

<style scoped>
/* 确保 iframe 占满整个抽屉内容区域 */
.el-drawer__body {
  padding: 0;
}
</style>
